<template>
  <div>

    <sky-panel title="格栅布局">
      <template v-slot:main>

        <sky-layout-row>
          <sky-layout-col :span="24">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row>
          <sky-layout-col :span="12">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="12">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

      </template>
    </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">
        &lt;sky-layout-row&gt;
          &lt;sky-layout-col :span="24"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
        &lt;/sky-layout-row&gt;

        &lt;sky-layout-row&gt;
          &lt;sky-layout-col :span="12"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="12"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
        &lt;/sky-layout-row&gt;

        &lt;sky-layout-row&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
        &lt;/sky-layout-row&gt;

        &lt;sky-layout-row&gt;
          &lt;sky-layout-col :span="4"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="4"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="4"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="4"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="4"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="4"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
        &lt;/sky-layout-row&gt;

        </code>
    </pre>
    </div>
  </sky-code-panel>


  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    setup() {},
  });
</script>

<style lang="scss" scoped>
/**容器内占位符样式 */
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
